<template>
  <div>
    <a-row :gutter="10">
      <a-col :span="4">
        <a-card title="字典类型列表">
          <a-list bordered :data-source="dicTypes" size="small" :style="{
            minHeight: '360px',
            'overflow-y': 'auto',
            height: '500px',
          }">
            <a-list-item slot="renderItem" slot-scope="item" :class="dicTypeUniqueCode === item.value ? 'bg-blue' : ''">
              <a-list-item-meta>
                <a slot="title" @click="dicTypeClick(item.value)">{{ item.name }}
                </a>
              </a-list-item-meta>
            </a-list-item>
          </a-list>
        </a-card>
      </a-col>
      <a-col :span="20">
        <!--查询参数-->
        <params ref="params" @handleRefresh="handleRefresh" :loading="loading"></params>
        <!--表格页面-->
        <my-table ref="myTable" :dataSource="dataSource" :columns="columns" :loading="loading" title="字典值列表" @handleAdd="handleAdd" @removeSubmit="removeSubmit" @handleEdit="handleEdit" @handleImport="handleImport" @handleExport="handleExport" @handleDetail="handleDetail" @loadData="loadData" :row-selection="{ columnWidth: 100 }" addAction="dic_create" deleteAction="dic_delete" editAction="dic_edit" detailAction="dic_details" />
        <!--修改页面-->
        <modify v-if="modifyEntity.showModify" @handleRefresh="handleRefresh" :modifyEntity="modifyEntity" />
      </a-col>
    </a-row>
  </div>
</template>
<script>
import modify from "./modify";
import myTable from "_c/myTable/index";
import params from "./components/params";
import { queryDicTypeList } from "@/views/sysModule/system/dicType/dicType";
import { dicColumns, queryDicPages, deleteDic } from "./dic";
export default {
  name: "Dic",
  components: { params, modify, myTable },
  data() {
    return {
      modifyEntity: {
        // 传递的主键
        id: "",
        // 页面标题
        title: "",
        // 页面操作类型
        operation: "",
        // 是否展示编辑页面
        showModify: false,
      },
      // 加载动画
      loading: false,
      // 绑定的数据源
      dataSource: [],
      // 表格绑定的列
      columns: dicColumns,
      // 左侧字典类型数据源
      dicTypes: [],
      // 当前选中的树节点
      dicTypeUniqueCode: "",
    };
  },
  created() {
    // 加载左侧字典类型数据
     queryDicTypeList()
       .then((res) => {
         this.dicTypes = res.data;
       })
  },
  methods: {
    //#region 查询列表
    // 保存/修改后刷新表格
    handleRefresh() {
      this.modifyEntity.showModify = false;
      this.$refs.myTable.pagination.current = 1;
      this.loadData();
    },
    // 加载数据
    loadData() {
      this.loading = true;
      this.$refs.params.params.dicTypeUniqueCode = this.dicTypeUniqueCode;
      let queryParams = {
        ...this.$refs.params.params,
        current: this.$refs.myTable.pagination.current,
        pageSize: this.$refs.myTable.pagination.pageSize,
      };
      let that = this;
      queryDicPages(queryParams)
        .then((res) => {
          let { data, totalCount } = res.data;
          that.dataSource = data;
          that.$refs.myTable.pagination.total = totalCount;
          that.loading = false;
        })
        .catch(() => {
          that.loading = false;
        });
    },
    //#endregion

    //#region 添加
    // 打开添加页面
    handleAdd() {
      this.modifyEntity = {
        title: "新增字典参数",
        showModify: true,
        operation: this.operationFlag.Add,
      };
    },
    //#endregion

    //#region 删除
    // 删除
    removeSubmit(ids) {
      deleteDic(ids).then((res) => {
        if (res.code == 200) {
          this.$notification.success({ description: res.msg });
          this.handleRefresh();
        } else {
          this.$notification.error({ description: res.msg });
        }
      });
    },
    //#endregion

    //#region 修改
    // 打开编辑页面
    handleEdit(item) {
      this.modifyEntity = {
        id: item.id,
        title: "修改字典参数",
        showModify: true,
        operation: this.operationFlag.Edit,
      };
    },
    //#endregion

    //#region 详情
    // 打开详情页面
    handleDetail(item) {
      this.modifyEntity = {
        id: item.id,
        title: "字典参数详情",
        showModify: true,
        operation: this.operationFlag.Detail,
      };
    },
    //#endregion

    //#region 导入
    // 导入数据
    handleImport() { },
    //#endregion

    //#region 导出
    // 导出数据
    handleExport() { },
    //#endregion

    //#region 字典类型列表点击
    // 左侧字典类型列表点击，刷新右侧表格
    dicTypeClick(uniqueCode) {
      this.dicTypeUniqueCode = uniqueCode;
      this.loadData();
    },
    //#endregion
  },
};
</script>
